---
name: Powered by Gatsby
route: /docs/powered-by-gatsby
parent: Documentation
menu: Customizing
---

# Powered by Gatsby

[Gatsby](https://gatsbyjs.org) is a blazing fast modern site generator for React and one of the greatest modern tools
of the new frontend era. It has a huge ecosystem and community around it and a very talented team behind it.

Starting from v2, docz's core is entirely built around Gatsby, this is the biggest change
in the project since its creation and one of the best things that we could make for the tool.

Using Gatsby as bundler behind the scenes gives you a lot of benefits like :

* Stay focused on creating features instead of worrying about bundler management
* Static and optimized builds by default
* Fast dev-experience and better workflow
* Huge ecosystem of tools, plugins and community
* Better and easy way to customize things inside Docz

## Gatsby API and Hooks

Gatsby has an extensive [API for developers](https://www.gatsbyjs.org/docs/api-reference/) and a lot of hooks and lifecycle methods that you can use in order to customize your build process.

You can hook into it in a lot of ways and all of these hooks and properties are available when you use docz.

> Check [the Gatsby API reference](https://www.gatsbyjs.org/docs/api-reference/) here.

If you want to use any of those Gatsby configurations file inside your Docz project,
create it in the root and docz will do the rest.

If you want to make some changes to your webpack configuration, you can use
the `onCreateWebpackConfig` hook by exporting a function from the `gatsby-node.js` file.

For example to create aliases or change how your modules are resolved, you can do something like the below example :

```js
// gatsby-node.js
const path = require('path')

exports.onCreateWebpackConfig = args => {
  args.actions.setWebpackConfig({
    resolve: {
      modules: [path.resolve(__dirname, '../src'), 'node_modules'],
      alias: {
        '@': path.resolve(__dirname, '../src/components/'),
      },
    },
  })
}
```

> ⚠ Note the '..' in the path because the docz gatsby project lives in the `.docz` directory

Or if you want to change your Babel configuration you can use the `onCreateBabelConfig` hook for this:

```js
// gatsby-node.js
exports.onCreateBabelConfig = ({ actions }) => {
  actions.setBabelPlugin({
    name:  `@emotion/babel-plugin`,
    options: {
      sourceMap: true,
    },
  })
}
```

You can use these hooks and actions to modify or get information about your bundler process.
